<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h2>一、是什么</h2>
  <div>Tree shaking 是一种通过清除多余代码方式来优化项目打包体积的技术，专业术语叫 Dead code elimination</div>
  <br>
  <div>简单来讲，就是在保持代码运行结果不变的前提下，去除无用的代码</div>
  <br>
  <div>在Vue2中，无论我们使用什么功能，它们最终都会出现在生产代码中。主要原因是Vue实例在项目中是单例的，捆绑程序无法检测到该对象的哪些属性在代码中被使用到</div>
  <br>
  <div>而Vue3源码引入tree shaking特性，将全局 API 进行分块。如果你不使用其某些功能，它们将不会包含在你的基础包中</div>
  <h2>二、如何做</h2>
  <div>Tree shaking是基于ES6模板语法（import与exports），主要是借助ES6模块的静态编译思想，在编译时就能确定模块的依赖关系，以及输入和输出的变量</div>
  <br>
  <div>Tree shaking无非就是做了两件事：</div>
  <ul>
    <li>编译阶段利用ES6 Module判断哪些模块已经加载</li>
    <li>判断那些模块和变量未被使用或者引用，进而删除对应代码</li>
  </ul>
  <h2>三、作用</h2>
  <div>通过Tree shaking，Vue3给我们带来的好处是：</div>
  <ul>
    <li>减少程序体积（更小）</li>
    <li>减少程序执行时间（更快）</li>
    <li>便于将来对程序架构进行优化（更友好）</li>
  </ul>
</body>
</html>